<template>
  <div style="position: fixed;width: 100%;">
    <input type="text" v-focus.enter="msg" />

    <!-- 定义一个自定义指令v-color 实现只要使用了这个指令，就可以把标签的文字改成相应的颜色，比如v-color="mycolor" -->
    <div v-if="isShow" class="box" v-color="mycolor" v-clickoutside="hideEl">
      <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      msg: 'hello',
      mycolor: 'red',
      isShow: true
    }
  },
  methods: {
    hideEl () {
      this.isShow = false
      // 还可以做其他逻辑
    }
  },
  directives: {
    // 自定义指定取名字不要带v-，但是使用的时候要加v-
    focus: {
      // binding是一个自定指令的信息记录对象
      // 注意：自定义指令中无法拿到this实例
      inserted: function (el, binding) {
        console.log(binding)
        el.focus()
      }
    },
    color: {
      inserted: function (el, binding) {
        el.style.color = binding.value
      }
    },
    clickoutside: {
      inserted (el, binding) {
        // 将事件的处理函数绑定到el上，目的是为了在移除事件的时候，使用的回调函数和绑定时的回调函数一模一样
        el.fn = function (e) {
          console.log(e.target)
          // 如果绑定指令的元素，不包含你点击的这个元素，就说明点击的外面，那就执行回调函数
          if (!el.contains(e.target)) {
            // 注意这里的value是一个函数
            binding.value()
          }
        }
        document.documentElement.addEventListener('click', el.fn)
      },
      unbind (el) {
        // 必须要解绑事件
        document.documentElement.removeEventListener('click', el.fn)
      }
    }
  }
}
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}
</style>
